import axios from 'axios'
//引入vuex 中的数据管理仓库 因为我们想做一个  类似于保时捷官网的一个  全局loading效果
 import store from '../store/index'
var baseURL = 'http://localhost:3003'
// 我们用类来封装    类可以保存状态   
class HttpRequest {
  // 类似于红警展开基地车的过程   
  constructor(baseUrl = baseURL) {
      console.log('constructor执行了')
    this.baseUrl = baseUrl
    this.queue = {
        // '/axiosget1':true
    }
  }
  //先定义这里还没动
  getInsideConfig() {
    const config = {
      baseURL: this.baseUrl,
      headers: {
         //'Content-Type': 'multipart/form-data'
      }
    }
    return config
  }
  //先定义这里还没动
  distroy(url) {
    delete this.queue[url]
    if (!Object.keys(this.queue).length) {
     store.commit('changeloading',false)
     
      
    }
  }
      // 1 instace是刚创建的axis实例 2  potion.url    /axiosget1
  interceptors(instance, url) {
    // request 就是请求的意思  请求拦截器  
    instance.interceptors.request.use(config => {
      console.log('以下请求拦截')
      console.log(config)
      // 添加全局的loading...
    //   如果 queue对象里面 没有东西 就开启全局Loading
      if (!Object.keys(this.queue).length) {
         store.commit('changeloading',true)
      }

      //入队处理 
      this.queue[url] = true    
      // config.headers['Authorization'] = getToken()  
      return config
    }, error => {
      console.log('请求拦截 有错误会报错')
      return Promise.reject(error)
    })


    // response 就是响应的意思  响应拦截器  
    // setTimeout(()=>{
    //     res.status(200).send({
    //         code:'6102',
    //         data:'我是数据666'
    //       })
    // },2000)

      
    // setTimeout(()=>{
    //   res.status(403).send({ 
    //     code:'4000',
    //     data:'可能存在什么错误哦'
    //   })
    // },3000)
    instance.interceptors.response.use(res => {
      console.log('以下响应拦截')
      console.log(res)
      this.distroy(url)
      const { data } = res
   
      return res.data

    }, err => {
      console.log('进入响应拦截response err里面')
      console.log('err',err.response)
      this.distroy(url)
      
      if (err && err.response) {
        switch (err.response.status) {
          case 400:
            err.message = '请求错误我亲手改的jkjjk'
            break
    
          case 401:
            err.message = '未授权，请登录'
            break
    
          case 403:
            err.message = '拒绝访问'
            break
    
          case 404:
            err.message = `请求地址出错`
            break
    
          case 408:
            err.message = '请求超时'
            break
    
          case 500:
            err.message = '服务器内部错误'
            break
    
          case 501:
            err.message = '服务未实现'
            break
    
          case 502:
            err.message = '网关错误'
            break
    
          case 503:
            err.message = '服务不可用'
            break
    
          case 504:
            err.message = '网关超时'
            break
    
          case 505:
            err.message = 'HTTP版本不受支持'
            break
    
          default:
        }
      }
    
      return Promise.reject(err)
    })
  }
  request(options) {
    //   axios.create 创建一个 新axios 
    const instance = axios.create()
    // {
    //   baseURL: this.baseUrl,
    //   headers: {
    //      //'Content-Type': 'multipart/form-data'
    //   }


    // {
    //     baseURL: this.baseUrl,
    //     headers: {
            
    //     },
    //     {
    //         url:'/axiosget1',
            
    //         method:'get'
    //     }


    // }
    options = Object.assign(this.getInsideConfig(), options)
    // 1 instace是刚创建的axis实例 2  potion.url    /axiosget1
    this.interceptors(instance, options.url)
    // 这个实例返回前面的时候 还把这个instance的实例 用请求拦截响应拦截 感染了
    return instance(options)
  }
}
export default HttpRequest


// axios.request({
//     url:'/axiosget1',
//     method:'get'
// })